<template>
  <div class="footer">
    <el-drawer width="800" v-model="drawer" :title="selectedItem.noticeTitle">
      <template #title>
        <div style="display: flex;justify-content: space-between;text-align: center;">
          <span>{{selectedItem.noticeTitle}}</span>
        </div>
      </template>
      <div>
          <div style="text-align: right;margin-bottom: 5px;">
               <span>{{selectedItem.createTime}}</span>
          </div>
        &nbsp;&nbsp;&nbsp;&nbsp;{{detailsContent.noticeContent}}
      </div>
    </el-drawer>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-card style="min-height: 250px;margin-top: 10px;">
          <template #header>
            <div class="card-header">
              <div>
                <el-icon><BellFilled /></el-icon>
                <span>系统通告</span>
              </div>
              <!-- <el-button class="button" text type="primary" @click="$router.push('./more-info')">更多</el-button> -->
            </div>
          </template>
          <p v-for="item in noticficationList" class="common-question">
            <el-link @click="drawer = true; selectedItem = item" type="primary">{{item.noticeTitle}}</el-link>
            <span class="date">{{item.createTime}}</span>
          </p>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="min-height: 250px;margin-top: 10px;">
          <template #header>
            <div class="card-header">
              <div>
                <el-icon><QuestionFilled /></el-icon>
                <span>常见问题</span>
              </div>
              <div>
               <!-- <el-button class="button" text type="primary" @click="$router.push('./more-info')">更多</el-button>-->
              </div>
            </div>
          </template>
          <p v-for="item in QAList" class="common-question">
            <el-link @click="drawer = true; selectedItem = item" type="primary">{{item.noticeTitle}}</el-link>
            <span class="date">{{item.createTime}}</span>
          </p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const { response } = useRequest('/system/notice/listByUser', 'get', {
  params: {
    noticeType: 1 // 1 通知公告 2 常见问题
  }
}, { immediate: true })

const { response: res } = useRequest('/system/notice/listByUser', 'get', {
  params: {
    noticeType: 2 // 1 通知公告 2 常见问题
  }
}, { immediate: true })


const drawer = ref(false)
const selectedItem = ref({})

const noticficationList = computed(() => {
  return response?.value?.rows
})

const QAList = computed(() => {
  return res?.value?.rows
})

const detailsContent = ref({})

watch(() => selectedItem.value, (data) => {
  useRequest(`/system/notice/${data.noticeId}`, 'get', {}, {
    immediate: true,
    onSuccess: data => {
      detailsContent.value = data
    }
   })
})
</script>

<style scoped lang="scss">
.common-question {
  border-bottom: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
  .date {
    color: #898989;
    font-size: 12px;
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
}
.card-item {
  display: flex;
  background: #fff;
  border-radius: 5px;
  height: 154px;
  min-width: 300px;
  .card-item-title {
    font-size: 13px;
    font-weight: 700;
  }
  .card-item-money {
      font-weight: 700;
      color: #333;
      font-size: 20px
    }

  .card-item-btns {
    display: flex;
    justify-content: center
  }
}
</style>
